<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/mui.css" />
  <link rel="stylesheet" href="../css/icon-daguanjia.css" />
  <style type="text/css">
    .mui-content {
      background-color: #f5f5f5;
    }
    
    .mui-content>div {
      padding: 11px 15px;
    }

    .task-img {
      padding: 5px 0 !important;
      text-align: center;
    }
    
    .task-desc:not(:first-of-type) {
      background-color: #fff;
      margin-top: 10px;
    }
    
    .info-tag-item {
      display: inline-block;
      border: 1px solid #444;
      border-radius: 15px;
      color: #444;
      font-size: 12px;
      padding: 0 5px;
    }
    
    .info-tag-item-active {
      display: inline-block;
      border: 1px solid rgb(255, 125, 51);
      border-radius: 15px;
      color: rgb(255, 125, 51);
      font-size: 12px;
      padding: 0 5px;
    }
    
    .task-desc-header {
      border-left: 2px solid #ff7d33;
      padding-left: 10px;
      color: #6b6b6b;
    }
    
    .task-desc-body {
      margin-top: 10px;
      border-top: 1px solid #ededed;
      padding: 10px;
    }
    
    .task-desc-body>h4 {
      color: #333;
    }
    
    .task-desc-body>p {
      margin-top: 10px;
      letter-spacing: .1em;
      color: #656565;
    }
    
    .tdb-price {
      color: #ff2424
    }
    
    .task-bottom {
      position: fixed;
      left: 0;
      bottom: 0;
      display: flex;
      width: 100vw;
      padding: 0 !important;
    }
    
    .mui-btn-block {
      margin-bottom: 0;
      color: #fff;
    }
    
    .btn-active {
      border-color: #272a33;
      background-color: #272a33;
    }
    
    .btn-noactive {
      border-color: #ff7d32;
      background-color: #ff7d32;
    }
  </style>
</head>

<body style="letter-spacing: 1px;">
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">任务详情</h1>
  </header>
  <div class="mui-content">
    <div class="task-img">
      <img src="http://iph.href.lu/345x180?text=大管家" / width="345" height="180">
    </div>
    <div class="task-desc" style="margin-top: 0;">
      <div class="task-desc-header">任务描述</div>
      <div class="task-desc-body">
        <h4 class="taskObj" style="
        line-height: 1.2;"></h4>
        <p class="taskObj"></p>
      </div>
    </div>
    <div class="task-desc">
      <div class="task-desc-header">任务类型</div>
      <div class="task-desc-body taskType">
          &ensp;&ensp;
        <!-- <span class="info-tag-item-active">专业技能任务</span> -->
      </div>
    </div>
    <div class="task-desc">
      <div class="task-desc-header">任务时间</div>
      <div class="task-desc-body">
        <span class="tdb-time taskObj"></span>&ensp;至&ensp;<span class="tdb-time taskObj"></span>
      </div>
    </div>
    <div class="task-desc">
      <div class="task-desc-header">价格</div>
      <div class="task-desc-body">
        <span class="tdb-price taskObj"></span>
      </div>
    </div>
    <div class="task-desc" style="margin-bottom: 56px;">
      <div class="task-desc-header">位置</div>
      <div class="task-desc-body">
        <img src="../images/weizhi_test.png" alt="位置" width="324" height="240">
      </div>
    </div>
    <div class="task-bottom">
      <button class="mui-btn mui-btn-block" type="button">&ensp;&ensp;</button>
      <!-- <button class="mui-btn mui-btn-block btn-active" type="button">任务开始</button>
      <button class="mui-btn mui-btn-block btn-noactive" type="button">任务结束</button> -->
    </div>
  </div>
</body>

<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>
<script type="text/javascript">
  var $ = mui,
    taskBottomEle = document.querySelector('.task-bottom'),
    taskID = app.getQueryString('id');

  window.onload = function() {
    if (taskID) readTask(taskID);
  }

  function readTask(taskID) {
    http.getToken({
      url: API.getReadOffer,
      data: {
        id: taskID
      },
      token: $state.token,
      deviceType: app.clientType.versions.android ? 'android' : 'iphone',
      success: function(res) {
        console.log('res-->>', res);
        var task = res.data;
        // 页面渲染数据
        renderTask(task);

        if (task.order_do) {
          if (task.order_state === 0) {
            taskBottomEle.innerHTML = `<button id="taskStart" class="mui-btn mui-btn-block btn-noactive" type="button">任务开始</button> <button id="taskEnd" class="mui-btn mui-btn-block btn-active" type="button">任务结束</button>`;

            var taskStartEle = document.getElementById('taskStart'),
              taskEndEle = document.getElementById('taskEnd');

            taskStartEle.addEventListener('tap', taskStartEve.bind(taskStartEle, taskEndEle), false);
          }

          if (task.order_state === 1) {
            taskBottomEle.innerHTML = `<button id="taskStart" class="mui-btn mui-btn-block btn-active" type="button">任务开始</button> <button id="taskEnd" class="mui-btn mui-btn-block btn-noactive" type="button">任务结束</button>`;

            var taskEndEle = document.getElementById('taskEnd');

            // taskStartEle.addEventListener('tap', taskStartEve.bind(taskStartEle, taskEndEle), false);
            taskEndEle.addEventListener('tap', taskEndEve.bind(taskEndEle), false);

          }

          if (task.order_state === 2) {
            taskBottomEle.innerHTML = `<button class="mui-btn mui-btn-block btn-active" type="button">任务完成</button>`;
          }
        } else {
          taskBottomEle.innerHTML = `<button class="mui-btn mui-btn-block btn-active" type="button">正在抢单...</button>`;
        }
      },
      error: function(err) {
        console.log('请求失败')
      }
    });
  }

  function taskStartEve(taskEndEle) {
    var me = this;

    $.confirm('您确认要任务开始吗?', '任务详情', ['取消', '确认'], function(e) {
      if (e.index === 1) {
        
        ({
          url: API.postOfferStart,
          data: {
            id: taskID,
            order_state: 1
          },
          token: $state.token,
          deviceType: app.clientType.versions.android ? 'android' : 'iphone',
          success: function(res) {
            console.log('res-->>', res);
            taskBottomEle.innerHTML = `<button id="taskStart" class="mui-btn mui-btn-block btn-active" type="button">任务开始</button> <button id="taskEnd1" class="mui-btn mui-btn-block btn-noactive" type="button">任务结束</button>`;

            var taskEndEle1 = document.getElementById('taskEnd1');

            // me.className = '';
            // me.removeEventListener('tap', taskStartEve, false);
            taskEndEle1.addEventListener('tap', taskEndEve.bind(taskEndEle), false);
          },
          error: function(err) {
            console.log('请求失败')
          }
        });

      }
    });
  }

  function taskEndEve() {
    var me = this;

    $.confirm('您确认要任务结束吗?', '任务详情', ['取消', '确认'], function(e) {
      if (e.index === 1) {
        http.postToken({
          url: API.postOfferEnd,
          data: {
            id: taskID,
            order_state: 2
          },
          token: $state.token,
          deviceType: app.clientType.versions.android ? 'android' : 'iphone',
          success: function(res) {
            console.log('res-->>', res);
            me.removeEventListener('tap', taskEndEve, false);
            taskBottomEle.innerHTML = `<button class="mui-btn mui-btn-block btn-active" type="button">任务完成</button>`;
          },
          error: function(err) {
            console.log('请求失败')
          }
        });

      }
    });
  }

  // 页面渲染数据
  function renderTask(task) {
    var taskArr = Array.from(document.querySelectorAll('.taskObj'));
    if(task.tech) {
      document.querySelector('.taskType').innerHTML = `<span class="info-tag-item-active">` + task.tech + `</span>`;
    }

    if (task.offer_images.length) {
      document.querySelector('.task-img > img').setAttribute('src', task.offer_images[0].file_path);
    }

    taskArr.map(function(value, index) {
      if (index === 0) taskArr[index].innerText = task.title;
      if (index === 1) taskArr[index].innerText = task.describe;
      if (index === 2) taskArr[index].innerText = task.start_time;
      if (index === 3) taskArr[index].innerText = task.end_time;
      if (index === 4) taskArr[index].innerText = task.amount;
    });

  }
</script>

</html>